<template>
  <div class="left-item-rate">
    <div class="title">{{ item.title }}</div>
    <div class="left-item-rate-row">
      <dv-percent-pond :config="{value:item.value,colors: ['#85DCFF','#0D88E3','#51C31C']}" :border-width="1" style="width:80%;height:100%;" />
      <div class="left-item-rate-row-num">{{ item.rate }}</div>
    </div>

  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => ({})
    }
  }
};
</script>

<style lang="scss" scoped>
.left-item-rate{
  .left-item-rate-row{
    height: 60%;
    display: flex;
    .dv-percent-pond{
      /deep/ text {
        display: none;
      }
    }
    .left-item-rate-row-num{
      padding-left: 10px;
      height: 100%;
      display: flex;
      align-items: center;
      color: #f6bd16;
    }
  }

  .title{
    font-size: 12px;
    color: rgba(255,255,255,0.85);
  }
}

</style>
